<!--专题页!-->
<template>
   <div class="topic">
       <ul>
           <li v-for="item in topicArr" :key='item.id'>
               <img v-lazy="item.scene_pic_url" alt="">
               <h3>{{item.title}}</h3>
               <span>{{item.subtitle}}</span>
               <p>{{item.price_info|formPrice}}起</p>
           </li>
       </ul>
       <div class="page">
           <van-pagination  @change="changePage" v-model="currentPage" :page-count="pageCount" mode="multi" :show-page-size='0'     />
       </div>
   </div>
</template>

<script>
import {getTopic} from '@/utils/https.js'

export default {
data(){
    return{
      topicArr:[],
      currentPage:1,
      pageCount:'',
      size:10,
     
    }
},
created(){
  this.geteData()
   console.log(this.currentPage);
},
methods:{
changePage(){
    console.log(this.currentPage);
    this.geteData()
   
},
geteData(){
     getTopic({page:this.currentPage,size:this.size}).then((res)=>{
    
        this.topicArr = res.data.data.data
        this.pageCount = res.data.data.totalPages
       
    })
}

}
}
</script>

<style lang='less' scoped>
    .topic{
       
        .page{
            width: 100%;
            height: 100px;
           
            .van-pagination{
             
               @red: #ee0a24;
             }
        }
        ul{
            li{
                text-align: center;
                img{
                    width: 100%;
                    display: block;
                }
                h3{
                    font-size: 18px;
                    color: black;
                    margin: 20px 0 25px;
                }
                p{
                    color: rgb(138, 0, 0);
                    font-size: 16px;
             
                    margin: 20px 0 45px; 
                }
                span{
                  
                    font-size: 16px;
                     
                }
            }
        }
    }
</style>